import { Modal, Form, Input, Space, Button, App } from 'antd';
import type { ModalProps } from 'antd';
import { useEffect } from 'react';
import { MenuType } from 'src/constants';
import { AddRole, UpdateRole } from 'src/api/modules/system';
import PermissionButton from 'src/components/Permission';
import { IRoleRespData, IRoleActionRequestData } from 'src/interface';
import { useBoolean } from 'ahooks';

interface IProps extends ModalProps {
  data: IRoleRespData | null;
  onOk?: () => void;
  onCancel?: () => void;
}

export default function MenuModal(props: IProps) {
  const { data, onCancel, open, onOk, ...rest } = props;
  const [loading, { toggle }] = useBoolean(false);
  const [formInstance] = Form.useForm();
  const { message } = App.useApp();

  const onSubmit = async () => {
    const result = await formInstance.validateFields();
    if (!result) return;
    const request = data ? UpdateRole : AddRole;
    toggle();
    const requestBody = { ...(data ?? {}), ...result } as IRoleActionRequestData;
    try {
      await request({
        ...requestBody,
      });
      onCancel && onCancel();
      onOk && onOk();
      message.success(`菜单${data ? '修改' : '新增'}成功`);
    } catch (err) {
      console.log(err);
    } finally {
      toggle();
    }
  };

  useEffect(() => {
    if (!open) return;
    if (data) {
      formInstance.setFieldsValue(data);
    } else {
      formInstance.resetFields();
      formInstance.setFieldValue('menuType', MenuType[0].value);
    }
  }, [open, data, formInstance]);

  return (
    <Modal
      open={open}
      {...rest}
      title={`${data ? '编辑' : '新增'}角色`}
      footer={null}
      onCancel={onCancel}>
      <Form form={formInstance} layout="vertical" labelCol={{ span: 5 }}>
        <Form.Item
          name="roleName"
          label="角色名称"
          required
          rules={[{ required: true, message: '请输入角色名称' }]}>
          <Input placeholder="请输入角色名称" autoComplete="off" />
        </Form.Item>
        <Form.Item
          name="roleCode"
          label="角色标识"
          required
          rules={[{ required: true, message: '请输入角色标识' }]}>
          <Input placeholder="请输入角色标识" autoComplete="off" />
        </Form.Item>
        <Form.Item
          name="roleDesc"
          label="角色描述"
          rules={[{ required: true, message: '请输入角色描述' }]}>
          <Input placeholder="请输入角色描述" autoComplete="off" maxLength={20} />
        </Form.Item>
        <Form.Item name="dsType" label="数据权限">
          <Input placeholder="请输入数据权限" autoComplete="off" />
        </Form.Item>
        <Form.Item name="dsScope" label="数据范围">
          <Input placeholder="请输入数据范围" autoComplete="off" />
        </Form.Item>
      </Form>
      <div className="flex justify-end">
        {
          <Space>
            <Button disabled={loading} onClick={onCancel}>
              取消
            </Button>
            <PermissionButton
              permission={data ? 'SYSTEM_ROLE_UPDATE' : 'SYSTEM_ROLE_ADD'}
              loading={loading}
              type="primary"
              onClick={onSubmit}>
              保存
            </PermissionButton>
          </Space>
        }
      </div>
    </Modal>
  );
}
